<script setup>
import { ref } from 'vue'

const evaluations = ref([
  {
    semester: '2021-2022-1',
    academicScore: 85,
    moralScore: 90,
    activityScore: 88,
    totalScore: 87.3,
    ranking: 15
  },
  {
    semester: '2021-2022-2',
    academicScore: 88,
    moralScore: 92,
    activityScore: 85,
    totalScore: 88.5,
    ranking: 12
  }
])

const currentSemester = ref('2021-2022-2')
const semesterOptions = [
  { label: '2021-2022学年第一学期', value: '2021-2022-1' },
  { label: '2021-2022学年第二学期', value: '2021-2022-2' }
]

const scoreDetails = ref({
  academic: [
    { item: '必修课程成绩', score: 86, weight: 0.7 },
    { item: '选修课程成绩', score: 90, weight: 0.3 }
  ],
  moral: [
    { item: '思想品德', score: 92, weight: 0.5 },
    { item: '行为规范', score: 88, weight: 0.5 }
  ],
  activity: [
    { item: '社团活动', score: 85, weight: 0.4 },
    { item: '志愿服务', score: 90, weight: 0.3 },
    { item: '文体活动', score: 86, weight: 0.3 }
  ]
})
</script>

<template>
  <div class="evaluation-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>综合测评结果</span>
          <el-select v-model="currentSemester" placeholder="选择学期">
            <el-option
              v-for="item in semesterOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </template>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="score-card" shadow="never">
            <template #header>
              <div class="score-header">总评成绩</div>
            </template>
            <el-descriptions :column="2" border>
              <el-descriptions-item label="学习成绩">85分</el-descriptions-item>
              <el-descriptions-item label="思想品德">90分</el-descriptions-item>
              <el-descriptions-item label="活动表现">88分</el-descriptions-item>
              <el-descriptions-item label="总分">87.3分</el-descriptions-item>
              <el-descriptions-item label="班级排名">15/60</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>
        
        <el-col :span="12">
          <el-card class="detail-card" shadow="never">
            <template #header>
              <div class="score-header">成绩明细</div>
            </template>
            <el-collapse>
              <el-collapse-item title="学习成绩 (40%)" name="1">
                <el-table :data="scoreDetails.academic" border>
                  <el-table-column prop="item" label="评分项目" />
                  <el-table-column prop="score" label="得分" width="100" />
                  <el-table-column prop="weight" label="权重" width="100" />
                </el-table>
              </el-collapse-item>
              <el-collapse-item title="思想品德 (30%)" name="2">
                <el-table :data="scoreDetails.moral" border>
                  <el-table-column prop="item" label="评分项目" />
                  <el-table-column prop="score" label="得分" width="100" />
                  <el-table-column prop="weight" label="权重" width="100" />
                </el-table>
              </el-collapse-item>
              <el-collapse-item title="活动表现 (30%)" name="3">
                <el-table :data="scoreDetails.activity" border>
                  <el-table-column prop="item" label="评分项目" />
                  <el-table-column prop="score" label="得分" width="100" />
                  <el-table-column prop="weight" label="权重" width="100" />
                </el-table>
              </el-collapse-item>
            </el-collapse>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<style scoped>
.evaluation-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.score-card, .detail-card {
  margin-bottom: 20px;
}

.score-header {
  font-weight: bold;
  color: #303133;
}

:deep(.el-collapse-item__header) {
  font-weight: bold;
}
</style> 